const renderHandle = (vm, h, params) => {
  const { row } = params
  let buttonArr = [
    h(
      'Button',
      {
        props: {
          type: 'info',
          size: 'small',
          shape: 'circle',
          disabled: vm.userRole === 'ROLE_DEMO' ? true : false
        },
        style: {
          marginRight: '5px'
        },
        on: {
          click: () => {
            vm.$router.push({
              path: '/user/temperature/' + row.id
            })
          }
        }
      },
      '数据详情'
    )
  ]

  return h('div', buttonArr)
}

const columnsOfAlarm = vm => {
  return [
    {
      title: '设备名称',
      align: 'center',
      key: 'deviceName'
    },
    {
      title: '设备位置',
      align: 'center',
      key: 'location'
    },
    {
      title: '事件详情',
      align: 'center',
      key: 'content'
    },
    {
      title: '是否恢复',
      align: 'center',
      render: (h, params) => {
        const { errorStatus } = params.row

        if (errorStatus === 1) {
          return h(
            'Tag',
            {
              props: {
                color: 'success'
              }
            },
            '已恢复'
          )
        }

        return h(
          'Tag',
          {
            props: {
              color: 'error'
            }
          },
          '未恢复'
        )
      }
    },
    {
      title: '事件时间',
      align: 'center',
      render: (h, params) => {
        const { createdAt } = params.row
        return h('span', vm.moment(createdAt).format('YYYY-MM-DD HH:mm:ss'))
      }
    },
    {
      title: '恢复时间',
      align: 'center',
      render: (h, params) => {
        const { recoverAt } = params.row
        if (!!recoverAt)
          return h('span', vm.moment(recoverAt).format('YYYY-MM-DD HH:mm:ss'))
        else return h('span', '-')
      }
    }
  ]
}

const buildColumns = vm => {
  return [
    {
      title: '在线状态',
      align: 'center',
      render: (h, params) => {
        if (params.row.onlineState) {
          return h(
            'Tag',
            {
              props: {
                color: 'success'
              }
            },
            '在线'
          )
        }
        return h(
          'Tag',
          {
            props: {
              color: 'default'
            }
          },
          '离线'
        )
      }
    },
    {
      title: '设备名称',
      key: 'deviceName',
      align: 'center'
    },
    {
      title: '设备ID',
      key: 'deviceId',
      align: 'center'
    },
    {
      title: '设备位置',
      key: 'location',
      align: 'center'
    },
    {
      title: '数据状态',
      align: 'center',
      key: 'deviceStatus',
      render: (h, params) => {
        const { deviceStatus } = params.row
        switch (deviceStatus) {
          case 1:
            return h(
              'Tag',
              {
                props: {
                  color: 'green'
                }
              },
              '正常'
            )
          case 2:
            return h(
              'Tag',
              {
                props: {
                  color: '#ED4014'
                }
              },
              '告警'
            )
          default:
            return h(
              'Tag',
              {
                props: {
                  color: 'grey'
                }
              },
              '未知'
            )
        }
      }
    },
    {
      title: '更新时间',
      align: 'center',
      render: (h, params) =>
        h('span', vm.moment(params.row.updatedAt).format('YYYY-MM-DD HH:mm:ss'))
    },
    {
      title: '操作',
      align: 'center',
      render: (h, params) => renderHandle(vm, h, params)
    }
  ]
}

export { columnsOfAlarm, buildColumns }
